<template>
  <div class="box">
    <div class="guesslike">
      <h4>猜你喜欢</h4>
      <section class="order">
        <button>综合排序</button>
        <button @click="aesOrder">距离最近</button>
        <button @click="desOrder">销售最高</button>
        <button>筛选</button>
      </section>
      <section class="sole">
        <span>年货节热卖</span>
        <span>津贴联盟</span>
        <span>满减优惠</span>
        <span>品质联盟</span>
      </section>
    </div>
    <main>
      <div v-if="list.length">
        <div
          class="good"
          v-for="(item, index) in list"
          :key="index"
        
          @click="goSort(item)"
        >
          <div class="img-box">
            <img :src="item.picUrl" alt="" />
          </div>
          <section>
            <h2>{{ item.name }}</h2>
            <div class="price">
              <span style="color: orange">⭐ {{ item.wmPoiScore / 10 }}</span
              >&nbsp;&nbsp;
              <span>{{ item.monthSalesTip }}</span>
            </div>
            <div class="desc">
              <span>{{ item.deliveryTimeTip }}</span>
              <span>{{ item.minPriceTip }}{{ item.shippingFeeTip }} </span>
              &nbsp;
              <span>{{ item.averagePriceTip }}</span>
              <span style="color: orange">{{ item.distance }}</span>
            </div>
          </section>
        </div>
      </div>
       <!-- 骨架屏 占位置-->
      <van-skeleton class="skeleton" v-else title :row="12" />
    </main>
  </div>
</template>

<script>
import { shop_list } from "../api";

export default {
  name: "StoreList",
  data() {
    //定义响应式数据
    return {
      list: [],
    };
  },
  methods: {
    aesOrder() {
      this.list.sort((a, b) => parseInt(a.distance) - parseInt(b.distance));
    },
    desOrder() {
      this.list.sort((a, b) => {
        console.log(typeof b.monthSalesTip.slice(2));
        return b.monthSalesTip.slice(2) - a.monthSalesTip.slice(2);
      });

      // this.list = arr1;
      // return this.list;
    },
    goSort(item) {
      console.log("item", item);
      this.$router.push({path:"/Sort/",query:{id:item.mtWmPoiId}});
    },
  },

  mounted() {
    shop_list().then((res) => {
      if (res.data.code == 200) {
        this.list = res.data.list;
        console.log("res.data.list:", res.data.list);
        /* localStorage.setItem("id",res.data.list.mtWmPoiId) */
        /*  let arr2=[]
        res.data.list.forEach((item) => {
          arr2.push(item.mtWmPoiId)
          localStorage.setItem("id",JSON.stringify.arr2)
        }); */
      }
    });
  },
};

//点击升序按钮
</script>

<style lang="css" scoped>
.guesslike {
  background-color: rgb(251, 251, 251);
  height: 80px;
  border-radius: 7px;
}
.guesslike section {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.guesslike .sole span {
  background-color: lightgray;
  padding: 5px 5px;
  margin-top: 15px;
  border-radius: 5px;
}
.box {
  margin: 5px 10px 1px;
  /* background-color: rgba(200, 255, 0, 0.73); */
  /* height: 260px; */
  border-radius: 7px;
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
main {
  margin-top: 10px;
  /* background-color: rgb(255, 0, 238); */
  flex: 1;
  overflow: auto;
  border-radius: 7px;
}

main .good {
  display: flex;
  height: 100px;
  background-color: rgb(251, 251, 251);
  margin: 5px 0 5px;
  border-radius: 5px;
  /* justify-content: space-between; */
}
main .good .img-box {
  width: 65px;
  height: 75px;
  margin-top: 12.5px;
  /* border: 1px solid red; */
  margin-right: 5px;
}
main .good .img-box img {
  width: 65px;
  height: 75px;
}
main .good section {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
main .good h2 {
  font-size: 16px;
}
main .good .price {
  font-size: 14px;
  color: gray;
}
main .good .desc {
  font-size: 10px;
  color: gray;
}
main .good .text {
  flex: 1;
}
</style>